<template>
	<view class="container">
		<view class="check-pay-pw" id="checkpay">


			<view class="wrapper">
				<view class="font13 paypw-head" id="paypwhead">{{ headText }}</view>
				<view class="input-div display-flex">
					<PasswordInput 
						ref="passwordInput" 
						v-model="inputValue" 
						@finish="onInput" 
						:maxLength="6"
						:autoFocus="inputFocus"
						:key="componentKey"
					></PasswordInput>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		commonApi
	} from '@/api/index.js';
	import {
		getToken
	} from '@/api/auth.js';
	import md5 from '@/utils/md5.js';
	import {
		inject
	} from 'vue'
	import PasswordInput from '@/components/PasswordInput.vue'
	export default {
		components: {
			PasswordInput
		},
		data() {
			return {
				serverAddress: inject('$serverAddress'),
				inputValue: '',
				inputFocus: true,
				headText: '请输入支付密码',
				changepwds: {
					first: false,
					second: false
				},
				setpwd: '', // 参数：是否为设置密码
				userInfo: null,
				componentKey: 0 // 用于强制重新渲染组件
			};
		},

		onLoad(options) {
			// 获取参数
			this.setpwd = options.setpwd || '';

			// 获取用户信息
			this.userInfo = uni.getStorageSync('user_info') || {};

			// 自动聚焦输入框
			this.$nextTick(() => {
				this.focusInput();
			});
		},

		methods: {
			// 聚焦输入框
			focusInput() {
				this.inputFocus = true;
			},

			// 输入事件
			onInput(e) {
				console.log('内容改变，当前值为：' + e);
				const value = e;
				this.inputValue = value;
				// 限制6位数字
				if (value.length > 6) {
					return;
				}

				// 验证是否为数字
				const testNum = /^[0-9]*$/;
				if (!testNum.test(value)) {
					uni.showToast({
						title: '支付密码必须为数字',
						icon: 'none'
					});
					this.clearInput();
					this.focusInput();
					return;
				}


				console.log('====len====：', value.length);

				// 当输入6位时处理
				if (value.length >= 6) {

					this.handlePasswordComplete(value);
				}
			},

			// 密码输入完成处理
			handlePasswordComplete(password) {
				if (!this.changepwds.first) {
					// 第一次输入
					this.changepwds.first = password;
					// 清空输入并强制重新渲染组件
					this.clearInput();

					this.headText = '请再次支付密码';
					this.focusInput();
				} else {
					// 第二次输入
					if (!this.changepwds.second) {
						this.changepwds.second = password;

						if (this.changepwds.second === this.changepwds.first) {
							// 两次密码一致，提交
							this.submitPassword();
						} else {
							// 两次密码不一致
							uni.showToast({
								title: '两次输入密码不一致',
								icon: 'none'
							});
							this.changepwds.second = false;
							// 清空输入并强制重新渲染组件
							this.clearInput();
							this.focusInput();
						}
					}
				}
			},

			// 清空输入的统一方法
			clearInput() {
				this.inputValue = '';

				// 尝试通过组件引用直接重置
				if (this.$refs.passwordInput && typeof this.$refs.passwordInput.reset === 'function') {
					this.$refs.passwordInput.reset();
				}

				// 通过改变key强制重新渲染组件
				this.componentKey += 1;
				this.$forceUpdate()
				console.log('===inputValue=====：', this.inputValue);
			},

			// 提交密码
			async submitPassword() {
				const firstMd5 = md5(this.changepwds.first);
				const secondMd5 = md5(this.changepwds.second);

				try {
					let response;

					if (this.setpwd === 'yes') {
						// 从个人设置页面传来 - 设置密码
						response = await commonApi.setPayPassword({
							pay_pwd: firstMd5,
							pay_confirm_pwd: secondMd5
						});
					} else {
						// 手机找回支付密码页面传来 - 更新密码
						response = await commonApi.changePayPassword({
							pay_pwd: firstMd5,
							pay_confirm_pwd: secondMd5
						});
					}

					uni.showToast({
						title: response.msg || '操作结果',
						icon: response.r === 0 ? 'success' : 'none'
					});

					if (response.r === 0) {
						// 成功后返回
						setTimeout(() => {
							if (this.setpwd === 'yes') {
								uni.navigateBack({
									delta: 1
								});
							} else {
								uni.navigateBack({
									delta: 2
								});
							}
						}, 1000);
					}
				} catch (error) {
					console.error('设置支付密码失败:', error);
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				}
			},

			// 返回
			goBack() {
				uni.navigateBack();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background-color: #F6F6F6;
	}

	.check-pay-pw {
		width: 100%;
		height: 100vh;
	}

	.header-bag {
		box-sizing: border-box;
		width: 100%;
		height: 168rpx;
		line-height: 168rpx;
		padding: 0 56rpx;
		background-color: #FFFFFF;
		border-bottom: 2rpx solid #E6E6E6;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back {
		position: absolute;
		left: 56rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 48rpx;
		height: 76rpx;
	}

	.page-title {
		font-size: 36rpx;
		color: #333333;
		font-weight: 500;
	}

	.font18 {
		font-size: 36rpx;
	}

	.wrapper {
		padding: 80rpx 0rpx;
	}

	.paypw-head {
		text-align: center;
		color: #333333;
		font-size: 32rpx;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #e3e3e3;
	}

	.font13 {
		font-size: 26rpx;
	}

	.input-div {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
		gap: 20rpx;
	}

	.display-flex {
		display: flex;
	}

	.hidden-input {
		position: absolute;
		top: -200rpx;
		left: -200rpx;
		width: 10rpx;
		height: 10rpx;
		opacity: 0;
		z-index: -1;
	}

	.pwd-box {
		width: 88rpx;
		height: 88rpx;
		border: 2rpx solid #E8E8E8;
		border-radius: 8rpx;
		// background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		&.active {
			border-color: #FF5033;
			box-shadow: 0 0 8rpx rgba(255, 80, 51, 0.3);
		}
	}

	.pwd-dot {
		font-size: 40rpx;
		color: #333333;
		line-height: 1;
	}
</style>